<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>订单细节</title>
</head>

<body class="no-skin">

<!--导航部分-->
<div th:replace="_fragment :: nav"></div>

<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <!--    侧边栏-->
    <div th:replace="_fragment :: menu(4,4.1)"></div>

    <div class="main-content" >
        <div class="breadcrumbs" id="breadcrumbs">
            <script type="text/javascript">
                try {
                    ace.settings.check('breadcrumbs', 'fixed')
                } catch (e) {
                }
            </script>

            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a th:href="@{/admin/toIndex}">首页</a>
                </li>

                <li>
                    <a th:href="@{/admin/toOrder}">订单</a>
                </li>
                <li class="active">查看</li>
            </ul><!-- /.breadcrumb -->
        </div>

        <div class="page-content">
            <div class="page-content-area">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h3 class="header smaller lighter blue">详细信息</h3>
                        <div class="table-header lighter">
                            》
                        </div>
                        <div class="mdui-panel" mdui-panel="{accordion: true}">
                            <div class="mdui-panel-item mdui-panel-item-open">
                                <div class="mdui-panel-item-header">
                                    <div class="mdui-panel-item-title">
                                        <i class="mdui-icon material-icons">content_paste</i>&nbsp;&nbsp;订单信息
                                    </div>
                                    <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                                </div>
                                <div class="mdui-panel-item-body">
                                    <table class="mdui-table mdui-table-hoverable">
                                        <tbody>
                                        <tr>
                                            <td style="text-align: right">订单号:</td><td name="orderNum" id="orderNum" th:text="${order.orderNum}"></td>
                                            <td style="text-align: right">买家姓名:</td><td name="userName" id="userName" th:text="${order.userName}"></td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right">买家电话:</td><td name="userPhone" id="userPhone" th:text="${order.userPhone}"></td>
                                            <td style="text-align: right">买家地址:</td><td name="userAddress" id="userAddress" th:text="${order.userAddress}"></td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right">订单总额:</td><td name="amount" id="amount" th:text="'￥'+${order.amountStr}"></td>
                                            <td style="text-align: right">订单状态:</td><td name="orderStatus" id="orderStatus" th:text="${order.orderStatusStr}"></td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right">支付状态:</td><td name="payStatus" id="payStatus" th:text="${order.payStatusStr}"></td>
                                            <td style="text-align: right">下单时间:</td><td name="createTime" id="createTime" th:text="${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="mdui-panel-item">

                                <div class="mdui-panel-item-header">
                                    <div class="mdui-panel-item-title">
                                        <i class="mdui-icon material-icons">event_available</i>&nbsp;&nbsp;订单细节
                                    </div>
                                    <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                                </div>
                                <div class="mdui-panel-item-body">
                                    <table class="mdui-table mdui-table-hoverable">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>书名</th>
                                            <th>单价</th>
                                            <th>数量</th>
                                            <th>图片</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="orderDetail,stat:${order.orderDetails}">
                                            <td th:text="${stat.count}"></td>
                                            <td th:text="${orderDetail.bookName}" ></td>
                                            <td th:text="${orderDetail.bookPriceStr}" ></td>
                                            <td th:text="${orderDetail.bookQuantity}" ></td>
                                            <td ><img th:src="${orderDetail.bookIcon}" style="width: 40px;height: 40px;"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        </div>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content-area -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->

    <div th:replace="_fragment::footer"></div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->


<!--引入js	-->
<th:block th:replace="_fragment::script"></th:block>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    //添加图片
    function add(){
        var str = $("#id-input-file-2").val();
        var arr=str.split('\\');//注split可以用字符或字符串分割
        var my=arr[arr.length-1];//这就是要取得的图片名称

        $("#ace-file-container").attr("data-title","Change");
        $("#ace-file-name").attr("data-title",my);
        $("#ace-file-container").addClass("selected");
        //isFile();
    }

    //清空input的file
    function remove() {
        $("#removeInput").html('<input type="file" id="id-input-file-2" onchange="add()">');
        $("#ace-file-container").attr("data-title","Choose");
        $("#ace-file-name").attr("data-title","请选择图片");
        $("#ace-file-container").removeClass("selected");
        //isFile();
    }


    function isUserName() {
        var userName = $("#loginMyUser").val();
        if(userName == null || userName == ""){
            $("#errorMsg-userName").html("不能为空");
            return false;
        }else{
            $("#errorMsg-userName").html("");
            return true;
        }
    }

    function isPassword() {
        var password = $("#password").val();
        if(password == null || password == ""){
            $("#errorMsg-password").html("不能为空");
            return false;
        }else{
            $("#errorMsg-password").html("");
            return true;
        }
    }

    function isPassword2() {
        var p1 = $("#password").val();
        var p2 = $("#password2").val();
        if(p2 == null || p2 == ""){
            $("#errorMsg-password2").html("不能为空");
            return false;
        }else{
            if(p1 != p2){
                $("#errorMsg-password2").html("两次输入的密码不同");
                return false;
            }else{
                $("#errorMsg-password2").html("");
                return true;
            }
        }
    }

    function isPhone() {
        var phone = $("#phone").val();
        if(phone == null || phone == ""){
            $("#errorMsg-phone").html("不能为空");
            return false;
        }else{
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                $("#errorMsg-phone").html("手机号码格式错误");
                return false;
            }else{
                $("#errorMsg-phone").html("");
                return true;
            }
        }
    }


    function isAddress() {
        var address = $("#address").val();
        if(address == null || address == ""){
            $("#errorMsg-address").html("不能为空");
            return false;
        }else{
            $("#errorMsg-address").html("");
            return true;
        }
    }

    function isFile() {
        var file = $("#id-input-file-2").val();
        if(file == null || file == ""){
            $("#errorMsg-file").html("不能为空");
            return false;
        }else{
            $("#errorMsg-file").html("");
            return true;
        }
    }

    function isEmail() {
        var email = $("#email").val();
        var reg = /^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        if(email == null || email == ""){
            $("#errorMsg-email").html("不能为空");
            return false;
        }else{
            if(!reg.test(email)){
                $("#errorMsg-email").html("邮箱格式错误");
                return false;
            }else{
                $("#errorMsg-email").html("");
                return true;
            }
        }
    }

    function subForm() {
        var isTrue = isUserName() && isPassword() && isPassword2() && isPhone() && isAddress()  && isEmail();
        if(isTrue){
            $("#validation-form").submit();
        }
    }

</script>
</body>
</html>
